<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>SomaCloud's TypeScript TodoMVC</title>
	<link rel="stylesheet" href="assets/base.css">
	<style type="text/css">
		.data-cloak {
			display: none;
		}
	</style>
	<!--[if IE]>
	<script src="assets/ie.js"></script>
	<![endif]-->
</head>
<body>

	<section id="todoapp">
		<header id="header">
			<h1>Tasks</h1>
			<input id="new-todo" placeholder="Add Task .." autofocus data-keypress="add()" data-blur="clear()">
		</header>
		<section id="main">
			<input id="toggle-all" type="checkbox" data-click="toggleAll()" data-checked="{{allCompleted}}">
			<label for="toggle-all">Mark all as complete</label>
			<ul id="todo-list" class="data-cloak">
				<li data-repeat="todo in todos" class="{{completedClass(todo.completed)}} {{todo.editing}}">
					<div class="view">
						<input class="toggle" type="checkbox" data-checked="{{todo.completed}}" data-click="toggle(todo)">
						<label data-dblclick="edit(todo)">{{todo.title}}</label>
						<button class="destroy" data-click="remove(todo)"></button>
					</div>
					<input class="edit" value="{{todo.title}}" data-keypress="update(todo)">
				</li>
			</ul>
		</section>
		<footer id="footer" class="data-cloak" data-show="{{footerVisible}}">
			<span id="todo-count"><strong>{{active}}</strong> {{itemLabel}} left</span>
			<button id="clear-completed" data-show="{{clearCompletedVisible()}}" data-click="clearCompleted()">Clear completed ({{completed}})</button>
		</footer>
	</section>

	<footer id="info">
		<p>Double-click to edit a task</p>
		<p>Created by <a href="http://soundstep.com">Romuald Quantin</a></p>
		<p>Part of <a href="http://somacloud.co.nr">SomaCloud</a></p>
        <p>TypeScript version by <a href="#">Lukas Nosalek</a></p>
	</footer>

    <!-- scripts at end to load page faster -->
	<script src="js/build/soma.js"></script>
	<script src="js/lib/soma-template.js"></script>
	<script src="js/lib/classList.js"></script>
	<script src="js/todos/models/models.js"></script>
	<script src="js/todos/views/views.js"></script>
	<script src="js/app.js"></script>

</body>
</html>
